<template>
  <div ref="map" id="map"></div>
</template>

<script setup lang="ts">
import mapboxgl from 'mapbox-gl'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import mapjson from './assets/map.json'
import domeJson from './assets/dome.json'
const img = new URL('./assets/map_bg.png', import.meta.url).href
const map = ref(null) as any
const url = new URL('./assets/map_ing.json', import.meta.url).href
const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        message: 'Foo',
        iconSize: [60, 60],
      },
      geometry: {
        type: 'Point',
        coordinates: [-66.324462, -16.024695],
      },
    },
    {
      type: 'Feature',
      properties: {
        message: 'Bar',
        iconSize: [50, 50],
      },
      geometry: {
        type: 'Point',
        coordinates: [-61.21582, -15.971891],
      },
    },
    {
      type: 'Feature',
      properties: {
        message: 'Baz',
        iconSize: [40, 40],
      },
      geometry: {
        type: 'Point',
        coordinates: [-63.292236, -18.281518],
      },
    },
  ],
}

onMounted(() => {
  mapboxgl.accessToken =
    'pk.eyJ1IjoieGlueGlhbmciLCJhIjoiY2w0ZTNnMGs3MDBkdzNscDBjb3pjaWQ5YiJ9.d2Zjk81sQFYpiQ_BxiCHYA'

  const map = new mapboxgl.Map({
    container: 'map',
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    // 'mapbox://styles/mapbox/light-v11'
    style: 'mapbox://styles/mapbox/light-v11', // style URL
    center: [120.721941, 30.286334], // starting position
    zoom: 6.5, // starting zoom
    pitch: 50, // 倾斜高度
    // bearing: -50, // 轴距高度
  })
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))

  for (const marker of mapjson.features) {
    // Create a DOM element for each marker.
    const el = document.createElement('div')
    const width = 30
    const height = 30
    el.className = 'marker'
    el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`
    el.style.width = `${width}px`
    el.style.height = `${height}px`
    el.style.backgroundSize = '100%'

    const Marker = new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates[0][0][20])

      .addTo(map)
      .setPopup(
        new mapboxgl.Popup({ offset: 20, className: 'my-class' }).setHTML(
          `<h1>${marker.properties.name}</h1>`,
        ),
      )
    el.addEventListener('click', () => {
      Marker.getPopup()
    })

    // Add markers to the map.
  }

  map.on('load', () => {
    map.loadImage(img, (error, image) => {
      // map.addImage('ground', image)
      // 图层 上面添加区块

      map.addSource('maine', {
        type: 'geojson',
        data: mapjson,
      })

      map.addLayer({
        id: 'maine-c',
        type: 'fill-extrusion',
        source: 'maine', // reference the data source
        layout: { visibility: 'visible' },
        paint: {
          // 'fill-color': '#0080ff',
          // 'fill-opacity': 0.5,
          'fill-extrusion-vertical-gradient': true,
          'fill-extrusion-color': '#0080ff',
          'fill-extrusion-height': 15000,
          'fill-extrusion-base': 14900,
          'fill-extrusion-opacity': 0.85,
          'fill-extrusion-pattern': 'ground',
          // 'fill-extrusion-color': [
          //   'match',
          //   ['number', ['get', 'adcode']],
          //   '#AAAAAA',
          // ],
        },
      })

      // 图层 上面添加线
      map.addLayer({
        id: 'outline',
        type: 'line',
        source: 'maine',
        layout: {},
        paint: {
          'line-color': 'pink',
          'line-width': 3,
        },
      })

      // map.addSource('lable', {
      //   type: 'geojson',
      //   data: mapjson,
      // })
      // map.addLayer({
      //   id: 'geojson-label',
      //   type: 'symbol',
      //   source: 'lable',
      //   layout: {
      //     'text-field': ['get', 'name'],
      //     'text-size': 14,
      //     'text-variable-anchor': ['top'],
      //     'text-justify': 'center',
      //   },
      //   paint: {
      //     'text-color': 'rgb(159, 96, 55)',
      //     'text-halo-color': '#fff',
      //     'text-halo-width': 1.8,
      //   },
      // })
    })

    // addSource添加图层
  })
  map.on('click', () => {
    // const popup = new mapboxgl.Popup({ closeOnClick: false })
    //   .setLngLat([120.721941, 30.286334])
    //   .setHTML('<h1>Hello World!</h1>')
    //   .addTo(map)
  })
  map.on('style.load', () => {})
})
</script>

<style lang="scss">
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}
.marker {
  position: absolute;
  top: 0;
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.my-class {
  position: absolute;
  top: 0;
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.mapboxgl-popup-close-button {
  display: none;
}
</style>
